<script setup>
import RelationSchool from "./relationSchool.vue";
import RelationCourse from "./relationCourse.vue";
import {getProfessionalApi} from "@/api/edutation/professional.js";
import {useRoute} from "vue-router";
import {Back} from "@element-plus/icons-vue";

const activeIndex = ref('course')
const route = useRoute();
const proId = computed(()=>route.query.id)

const currentData = ref({})
getProfessionalApi(proId.value).then(({data}) => {
  currentData.value = data;
});

</script>

<template>
  <div class="app-container">
    <el-descriptions
        title="Vertical list with border"
        :column="4"
        :size="size"
        border
    >
      <template #title>
        <div @click="$router.back" class="cursor-pointer">
          <el-icon><Back/></el-icon>
          专业关联信息
        </div>
      </template>
      <el-descriptions-item label="专业名称">{{ currentData.proName}}</el-descriptions-item>
      <el-descriptions-item label="专业编码">{{ currentData.proCode}}</el-descriptions-item>
      <el-descriptions-item label="专业负责人">{{ currentData.proManager}}</el-descriptions-item>
      <el-descriptions-item label="负责人电话">{{ currentData.proManagerPhone}}</el-descriptions-item>
      <el-descriptions-item label="专业介绍" :span="3">
        {{currentData.proIntroduce}}
      </el-descriptions-item>
    </el-descriptions>
    <el-tabs class="mt20" v-model="activeIndex">
      <el-tab-pane label="开设院校管理" name="school">
        <RelationSchool/>
      </el-tab-pane>
      <el-tab-pane label="开设课程管理" name="course">
        <RelationCourse/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style scoped lang="scss">

</style>
